<template>
  <view>
    <view class="tabbar">
      <view class="navigator">
        <view class="warpper">
          <view
            v-for="(item, index) in filteredTabbarList"
            :key="index"
            @click="toIndex(item.pagePath)"
            :data-index="index"
          >
            <img
              :src="
                index == currentPage ? item.selectedIconPath : item.iconPath
              "
              class="icon"
            />
            <text
              :style="{
                color: index === currentPage ? '#2877FF' : '#A7B0BA',
                margin: '10px',
              }"
              >{{ item.text }}</text
            >
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { hasMenuPermission, MENU_ITEMS } from "@/common/permissionControl.js";

export default {
  props: {
    currentPage: {
      type: String,
      default: "0",
    },
  },

  data() {
    return {
      tabbarList: [
        {
          iconPath: "/static/tabbar/home.png",
          selectedIconPath: "/static/tabbar/home-active.png",
          text: "首页",
          pagePath: "/pages/common/index/index",
        },
        {
          iconPath: "/static/tabbar/business.png",
          selectedIconPath: "/static/tabbar/business-active.png",
          text: "办事",
          pagePath: "/pages/common/business/business",
          permission: MENU_ITEMS.BUSINESS_TAB,
        },
        {
          iconPath: "/static/tabbar/user-normal.png",
          selectedIconPath: "/static/tabbar/user-active.png",
          text: "用户",
          pagePath: "/pages/common/user/user",
        },
      ],
    };
  },
  computed: {
    filteredTabbarList() {
      const userRole = uni.getStorageSync("userRole");
      return this.tabbarList.filter(
        (item) =>
          !item.permission || hasMenuPermission(userRole, item.permission)
      );
    },
  },
  methods: {
    toIndex(pagePath) {
      console.log(pagePath, "jjj");
      uni.switchTab({
        url: pagePath,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.tab-content {
  height: calc(100vh - 100rpx);
  overflow: hidden;
}
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 90px;
  background-color: #fff;
  // box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
  z-index: 100;
}
.navigator {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}
.warpper {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}
.warpper view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.warpper view img {
  width: 30px;
  height: 30px;
}
</style>
